<template>
	<transition name="el-zoom-in-top">
		<el-scrollbar v-show="show&&showMembers.length" ref="scrollBox" class="group-member-choose"
			:style="{'left':pos.x+'px','top':pos.y-boxHeight+'px', 'max-height': boxHeight+'px'}">
			<div class="member-list">
				<div v-for="(member,idx) in showMembers" :key="member.id" 
					class="member-item" 
					:class="{'is-active': activeIdx==idx}"
					@click="onSelectMember(member)">
					<el-avatar :size="28" :src="member.headImage" class="member-avatar">
						{{ member.showNickName.substring(0,1) }}
					</el-avatar>
					<span class="member-name">{{ member.showNickName }}</span>
					<el-tag size="small" type="info" v-if="member.userId === -1" class="member-tag">全体</el-tag>
				</div>
			</div>
		</el-scrollbar>
	</transition>
</template>

<script>
	import ChatGroupMember from "./ChatGroupMember.vue";
	export default {
		name: "chatAtBox",
		components: {
			ChatGroupMember
		},
		props: {
			searchText: {
				type: String,
				default: ""
			},
			ownerId: {
				type: String,
			},
			members: {
				type: Array
			}
		},
		data() {
			return {
				show: false,
				pos: {
					x: 0,
					y: 0
				},
				activeIdx: 0,
				showMembers: [],
				itemHeight: 52, // 每个选项的高度（包含padding）
				maxVisibleItems: 6, // 最大显示多少个选项
				minHeight: 120 // 最小高度
			};
		},
		computed: {
			boxHeight() {
				// 计算实际需要的高度
				const contentHeight = this.showMembers.length * this.itemHeight;
				// 如果内容高度小于最小高度，返回最小高度
				if (contentHeight < this.minHeight) {
					return this.minHeight;
				}
				// 如果内容高度大于最大显示高度，返回最大显示高度
				const maxHeight = this.maxVisibleItems * this.itemHeight;
				return Math.min(contentHeight, maxHeight);
			},
			isOwner() {
				return this.$store.state.userStore.userInfo.id == this.ownerId;
			}
		},
		methods: {
			init() {
				if (this.$refs.scrollBox && this.$refs.scrollBox.wrap) {
					this.$refs.scrollBox.wrap.scrollTop = 0;
				}
				this.showMembers = [];
				let userId = this.$store.state.userStore.userInfo.id;
				let name = "全体成员";
				if (this.ownerId == userId && name.startsWith(this.searchText)) {
					this.showMembers.push({
						userId: -1,
						showNickName: name
					})
				}
				this.members.forEach((m) => {
					if (m.userId != userId && !m.quit && m.showNickName.startsWith(this.searchText)) {
						this.showMembers.push(m);
					}
				})
				this.activeIdx = this.showMembers.length > 0 ? 0: -1;
			},
			open(pos) {
				this.show = true;
				this.pos = pos;
				this.$nextTick(() => {
					this.init();
				});
			},
			updatePosition(pos) {
				if (this.show) {
					this.pos = pos;
				}
			},
			close() {
				this.show = false;
			},
			moveUp() {
				if (this.activeIdx > 0) {
					this.activeIdx--;
					this.$nextTick(() => {
						this.scrollToActive();
					});
				}
			},
			moveDown() {
				if (this.activeIdx < this.showMembers.length - 1) {
					this.activeIdx++;
					this.$nextTick(() => {
						this.scrollToActive();
					});
				}
			},
			select() {
				if (this.activeIdx >= 0) {
					this.onSelectMember(this.showMembers[this.activeIdx])
				}
				this.close();
			},
			scrollToActive() {
				if (!this.$refs.scrollBox || !this.$refs.scrollBox.wrap) {
					return;
				}
				
				const wrap = this.$refs.scrollBox.wrap;
				const currentPosition = this.activeIdx * this.itemHeight;
				const containerHeight = wrap.clientHeight;
				const scrollTop = wrap.scrollTop;
				
				if (currentPosition - scrollTop > containerHeight - this.itemHeight) {
					// 向下滚动
					wrap.scrollTop = currentPosition - containerHeight + this.itemHeight;
				} else if (currentPosition < scrollTop) {
					// 向上滚动
					wrap.scrollTop = currentPosition;
				}
			},
			onSelectMember(member) {
				this.$emit("select", member);
				this.show = false;
			}
		},
		watch: {
			searchText: {
				handler(newText, oldText) {
					this.init();
				}
			}
		}
	}
</script>

<style lang="scss">
// 添加过渡动画
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
	transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1),
				opacity .3s cubic-bezier(0.23, 1, 0.32, 1);
	transform-origin: center top;
}

.el-zoom-in-top-enter-from,
.el-zoom-in-top-leave-to {
	opacity: 0;
	transform: scaleY(0);
}

.group-member-choose {
	position: fixed;
	width: 240px;
	border-radius: 8px;
	background-color: var(--el-bg-color);
	box-shadow: var(--el-box-shadow-light);
	z-index: 9999;
	overflow: hidden;

	.member-list {
		padding: 4px 0;
	}

	.member-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		cursor: pointer;
		transition: all 0.2s ease;
		border-radius: 4px;
		margin: 0 4px;

		&:hover {
			background-color: var(--el-fill-color-light);
		}

		&.is-active {
			background-color: var(--el-color-primary-light-9);
			color: var(--el-color-primary);
		}

		.member-avatar {
			margin-right: 12px;
			background: var(--el-color-primary-light-7);
			color: var(--el-color-primary);
			font-size: 14px;
			border: 2px solid var(--el-border-color-lighter);
		}

		.member-name {
			flex: 1;
			font-size: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: var(--el-text-color-primary);
		}

		.member-tag {
			margin-left: 8px;
			font-weight: normal;
		}
	}

	.el-scrollbar__wrap {
		margin-bottom: 0 !important;
	}

	.el-scrollbar__bar.is-vertical {
		width: 6px;
		
		.el-scrollbar__thumb {
			background-color: var(--el-text-color-placeholder);
			opacity: 0.3;
			
			&:hover {
				opacity: 0.5;
			}
		}
	}
}
</style>